<template>
	<view v-if="!props.isCustomService">
		<view class="goods-detail-service m-20 p-l-20 p-r-20 radius-20 bg-white">
			<view class="item-box" v-if="props.goodsPromotionList?.length > 0" @click="hanldeTogglePromotionPopup">
				<view class="lab">优惠</view>
				<view class="val">
					<view class="tag" v-for="item,index in props.goodsPromotionList" :key="index">
						<uv-icon name="error-circle" color="#54BD63" size="15"></uv-icon>
						<text class="tit">{{ item.name }}</text>
					</view>
				</view>
				<uv-icon name="arrow-right" color="#606266" size="15"></uv-icon>
			</view>
			<view class="item-box" v-if="props.service?.length > 0" @click="hanldeToggleServicePopup">
				<view class="lab">服务</view>
				<view class="val">
					<view class="tag" v-for="item,index in props.service" :key="index">
						<uv-icon name="checkmark-circle" color="#D33123" size="15"></uv-icon>
						<text class="tit">{{ item.title }}</text>
					</view>
				</view>
				<uv-icon name="arrow-right" color="#606266" size="15"></uv-icon>
			</view>
			<view class="item-box" v-if="props.delivery?.length > 0" @click="hanldeToggleDeliveryPopup">
				<view class="lab">发货</view>
				<view class="val">
					<view class="tag" v-for="item,index in props.delivery" :key="index">
						<uv-icon name="tags" color="#f9ae3d" size="15"></uv-icon>
						<text class="tit">{{ item.title }}</text>
					</view>
				</view>
				<uv-icon name="arrow-right" color="#606266" size="15"></uv-icon>
			</view>
			<view class="item-box" v-if="props.spesDesc" @click="hanldeShowGoodSku">
				<view class="lab">规格</view>
				<view class="val">
					<view class="spesDesc">{{ props.spesDesc }}</view>
				</view>
				<uv-icon name="arrow-right" color="#606266" size="15"></uv-icon>
			</view>
			<!-- 用于其它商品详情，例如活动 -->
			<slot name="service"></slot>
		</view>

		<!-- 优惠弹框 -->
		<uv-popup ref="promotionPopup" mode="bottom" :closeable="true">
			<view class="promotion-popup">
				<view class="popup-title">全平台促销优惠</view>
				<view class="item-box" v-for="item,index in props.goodsPromotionList" :key="index">
					<view class="title">
						<view class="lab">活动{{ index+1 }}</view>{{ item.name }}
					</view>
					<view class="desc">
						<view class="lab">满足条件：</view>
						<view class="val tit">要求同时满足下面所有条件</view>
					</view>
					<view class="desc" v-for="cell,index in item.conditions" :key="index">
						<view class="lab">条件{{index+1}}</view>
						<view class="val"> {{ cell }} </view>
					</view>
					<view class="desc">
						<view class="lab">活动结果：</view>
						<view class="val tit">
							<view class="m-b-10" v-for="cell in item.results" :key="cell">{{ cell }}</view>
						</view>
					</view>
					<view class="desc">
						<view class="lab">活动时间：</view>
						<view class="val tit">{{item.startTime}} 至 {{ item.endTime }}</view>
					</view>
				</view>
			</view>
		</uv-popup>

		<!-- 服务弹框 -->
		<uv-popup ref="servicePopup" mode="bottom" :closeable="true">
			<view class="service-popup">
				<view class="popup-title">服务说明</view>
				<view class="item-box" v-for="item,index in props.service" :key="index">
					<view class="title">
						<uv-icon name="checkmark-circle" color="#D33123" size="15"></uv-icon>
						<text class="m-l-10">{{ item.title }}</text>
					</view>
					<view class="desc">{{ item.description }}</view>
				</view>
			</view>
		</uv-popup>

		<!-- 服务弹框 -->
		<uv-popup ref="deliveryPopup" mode="bottom" :closeable="true">
			<view class="delivery-popup">
				<view class="popup-title">发货说明</view>
				<view class="item-box" v-for="item,index in props.delivery" :key="index">
					<view class="title">
						<uv-icon name="tags" color="#f9ae3d" size="15"></uv-icon>
						<text class="m-l-10">{{ item.title }}</text>
					</view>
					<view class="desc">{{ item.description }}</view>
				</view>
			</view>
		</uv-popup>
	</view>
	<view v-else class=" m-20 p-l-20 p-r-20 radius-20 bg-white">
		<!-- 自定义服务 -->
		<slot name="customService"></slot>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import type { GoodsPromotionType, CommonQuestionServiceType } from "@/core/models";

	const props = withDefaults(defineProps<{
		isCustomService : boolean,
		goodsPromotionList : Array<GoodsPromotionType>,
		delivery : Array<CommonQuestionServiceType>,
		service : Array<CommonQuestionServiceType>,
		spesDesc : string,
	}>(), {
		isCustomService: false,
		goodsPromotionList: () => [],
		delivery: () => [],
		service: () => [],
		spesDesc: '',
	});

	const emits = defineEmits(['hanldeShowGoodSku']);
	const hanldeShowGoodSku = () => {
		emits('hanldeShowGoodSku')
	}

	const promotionPopup = ref();
	const hanldeTogglePromotionPopup = () => {
		promotionPopup.value.open();
	}

	const servicePopup = ref();
	const hanldeToggleServicePopup = () => {
		servicePopup.value.open();
	}

	const deliveryPopup = ref();
	const hanldeToggleDeliveryPopup = () => {
		deliveryPopup.value.open();
	}
</script>

<style lang="scss" scoped>
	@import './goods-detail-service.scss';
</style>